@timestamp: `new Date().getTime()`;

.nodata {
  margin: 0 auto;
}
// 加入俱乐部弹窗
.form_card {
  width: 494px !important;
  :deep(.n-card__content) {
    padding: 0;
    .n-form-item {
      .n-form-item-label {
        color: #fff;
      }
    }
  }

  .form_container {
    display: flex;
    flex-direction: column;

    .header {
      height: 50px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16px 16px 0 0;
      color: #fff;
      border-bottom: 2px solid rgba(38, 41, 76, 1);

      .title {
        font-size: 16px;
        font-weight: 500;
      }

      .close {
        position: absolute;
        top: 16px;
        right: 25px;
        display: flex;
        font-size: 12px;
        justify-content: center;
        align-items: center;
        flex-grow: 0;
      }
    }

    .form_body {
      gap: 20px;
      padding: 28px 32px;
      &.form_body_quick {
        padding: 25px;
      }
      .n-input {
        font-size: 14px;
        border-radius: 8px;
      }
      .upload_img {
        font-size: 16px;
        margin-bottom: 16px;
        .n-upload {
          display: flex;
          align-items: center;
          flex: 1;
          :deep(.n-upload-file-list) {
            width: 100%;
            margin-top: 0;
            .n-upload-file-info__name {
              color: #ddd;
              font-size: 16px;
            }
            .n-upload-file:hover {
              background-color: rgba(0, 0, 0 , .2);
            }
            .n-upload-file-info__action {
              .n-button {
                width: 26px;
                background: none;
                svg {
                  width: 1rem;
                }
              }
            }
          }
          .n-button {
            border-radius: 20px;
            margin-right: 5px;
            width: 76px;
            height: 36px;
            font-size: 16px;
            color: #fff;
            background: linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%);
            :deep(.n-button__border) {
              border: 0;
            }
          }
        }
      }

    }

    .form_footer {
      padding: 4px 25px;
      a, button {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 0;
        color: #fff;
        width: 170px;
        height: 52px;
        background: rgba(33, 36, 67, 1);

        &[disabled] {
          opacity: .5;
          cursor: not-allowed;
        }
      }
    }

  }
}

.club_content {
  margin-bottom: 40px;
  color: #fff;
  .back_box {
    gap: 6px !important;
    font-size: 30px;
    font-weight: 600;
    .back_icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border: 1px solid #36445E;
      border-radius: 8px;
    }
  }
  .top_title {
    font-weight: 700;
    font-size: 30px;
    margin: 24px 0;
  }
  .top_box {
    .item_list {
      cursor: pointer;
      width: 320px;
      height: 144px;
      background-size: 100%;
      background-repeat: no-repeat;

      .item_list_l {
        width: 180px;
        img {
          width: 48px;
          height: 48px;
        }
      }
      &.item_list_next {
        width: 688px;
        height: 203px;
        .item_list_l {
          width: 420px;
          img {
            width: 64px;
            height: 64px;
          }
        }
      }

    }
  }
  .bottom_box {

    .tab_list {
      margin: 44px 0 20px;
      gap: 30px !important;
      .item_list {
        position: relative;
        gap: 5px !important;
        .icon {
          width: 27px;
          height: 23px;
          background: url('/img/club/new/icon_club.webp?t=@{timestamp}') center no-repeat;
          background-size: 100%;
          &.icon_game {
            background-image: url('/img/club/new/icon_game.webp?t=@{timestamp}');
          }
        }
        &.active {
          color: rgba(181, 164, 255, 1);
          &::after {
            content: '';
            position: absolute;
            border-radius: 100px;
            width: 100%;
            height: 7px;
            background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
            bottom: -10px;
          }

          .icon {
            background-image: url('/img/club/new/icon_club_a.webp?t=@{timestamp}');
            &.icon_game {
              background-image: url('/img/club/new/icon_game_a.webp?t=@{timestamp}');
            }
          }
        }
      }
    }
    .tab_right {
      min-width: 100px;
      height: 48px;
      border-radius: 8px;
      gap: 2px !important;
      .icon {
        width: 24px;
        height: 25px;
        background: url('/img/club/new/icon_sx.webp?t=@{timestamp}') center no-repeat;
        background-size: 100%;
      }
    }

    .join_club_box {
      margin: 20px 0 0;
      gap: 19px !important;

      .item_list {
        gap: 11px !important;
        cursor: pointer;
        position: relative;
        flex-wrap: nowrap;
        width: 454px;
        height: 140px;
        padding: 14px 0 14px 14px;
        font-size: 14px;
        color: rgba(175, 182, 189, 1);
        background: url('/img/club/new/listBg1.webp?t=@{timestamp}') center no-repeat;
        background-size: 100%;
        &:nth-child(3n+2) {
          background-image: url('/img/club/new/listBg2.webp?t=@{timestamp}');
        }
        &:nth-child(3n+3) {
          background-image: url('/img/club/new/listBg3.webp?t=@{timestamp}');
        }
        .bg_txt {
          position: absolute;
          right: 0;
          font-weight: 700;
          font-size: 61.5px;
          color: rgba(255, 255, 255, 0.3);
          opacity: 0.08;
          text-align: right;
          line-height: 75px;
          padding-right: 3px;
        }
        img {
          border: 3px solid rgba(62, 62, 62, 1);
          width: 111px;
          height: 111px;
          border-radius: 50%;
        }
        .item_list_l {
          position: relative;
          .c_box {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.72);
            //background: url('/img/club/new/smallBg.webp?t=@{timestamp}') center no-repeat;
            background-size: 100%;
            color: rgba(255, 255, 255, 1);
            width: 106px;
            height: 31px;
            border-radius: 0 0 50% 50%;
          ;
          }
        }
        .item_list_r {
          flex: 1;
          div:first-child {
            color: #fff;
            font-size: 20px;
            font-weight: 600;
          }
          .txt_dec {
            gap: 0 !important;
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 这里是超出几行省略 */
            overflow: hidden;

            .time_box {
              gap: 6px !important;
              img {
                width: 16px !important;
                height: 16px !important;
              }
              .it_right {
                width: 90px;
                height: 36px;
                border-radius: 8px;
                color: #fff;
              }
            }

            .item_bb {
              font-size: 14px;
              color: rgba(175, 182, 189, 1);
              gap: 3px !important;
              min-width: 33.33%;

              .item_r_txt {
                max-width: 77%;
              }
              &.size_12 {
                font-size: 12px;
              }
              .icon {
                img {
                  border: 0;
                  width: 20px;
                  height: 20px;
                }
              }
            }
          }
        }
      }
    }
  }

}

// 快速开始
.quick_box {
  gap: 20px 0 !important;
  .ks_list {
    font-size: 16px;
    width: 25%;
    text-align: center;
    img {
      width: 84px;
    }
  }
}

// 提示确认窗口
.tip_form_body {
  font-size: 16px;
  text-align: center;
  padding: 28px 0 32px;
  .tips_title {
    margin-bottom: 30px;
  }
  .tips_btn {
    gap: 40px !important;
    a {
      width: 170px;
      height: 40px;
      line-height: 40px;
      background: #212443;
      border-radius: 8px;
    }
  }
}
